<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8" />
		<title>选择器练习</title>
		<style type="text/css">
			body {
				font-family: "微软雅黑";
				font-size: 18px;
				padding-bottom: 300px;
			}

			input {
				font-size: 18px;
				margin-top: 10px;
			}

			div,
			span {
				width: 250px;
				border: 1px solid #000;
				padding-left: 10px;
				background: #bed4ef;
			}

			span {
				display: block;
			}

			body>div,
			body>span {
				height: 100px;
				margin: 10px 0px 0px 10px;
				display: inline-block;
				vertical-align: middle;
			}

			#one {
				width: 250px;
				height: 185px;
			}

			div>span,
			div>div {
				width: 230px;
				height: 35px;
				margin: 5px;
			}
		</style>

		<!-- 引入jquery函数库文件 -->
		<script src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			/* 文档就绪事件函数(即在浏览器加载完最后一个html元素后立即执行) */
			$(function() {
				/* -------一、基本选择器练习------- */
				/* 1、选中id为b1的按钮并为其绑定点击事件，点击b1按钮：改变所有 div 元素的背景色为 #FD5551 */
				$("#b1").click(function(){
					$(div).css("background", "#FD5551");
				});

				/* 2、选中id为b2的按钮并为其绑定点击事件，点击b2按钮：改变 id 为 one 的元素的背景色为 #7fa728 */

				/* 3、选中id为b3的按钮并为其绑定点击事件，点击b3按钮：
				改变 class 为 mini 的所有元素的背景色为 #EE82EE */

				/* ---------二、层级选择器------- */
				/* 4、选中id为b4的按钮并为其绑定点击事件，点击b4按钮：改变 div 内所有 span 的背景色为 #DC21D2 */

				/* 5、选中id为b5的按钮并为其绑定点击事件，点击b5按钮：改变 id为two 元素的下一个相邻的 div元素 的背景色为 #29a29e */

				/* 6、选中id为b6的按钮并为其绑定点击事件，点击b6按钮：改变 id为two 元素的后面所有的div兄弟元素 的背景色为 #ECD822 */

				/* ---------三、基本过滤选择器------- */
				/* 7、选中id为b7的按钮并为其绑定点击事件，点击b7按钮：改变第一个以及最后一个 div 元素的背景色为 #5500ff */

				/* 8、选中id为b8的按钮并为其绑定点击事件，点击b8按钮：改变第4个 div 元素的背景色为 #D917C6 */

				/* ---------三、基本过滤选择器------- */
				/* 9、选中id为b9的按钮并为其绑定点击事件，点击b9按钮：测试表单选择器的使用 */
				$("#b9").click(function(){
					// 1、获取所有的表单项元素(input/select/textarea/button)
					console.log($(":input"));
					
					// 2、获取所有的文本输入框
					// $("input[type='text']").css("background", "pink");// 效果和下面一样
					$(":text").css("background", "pink");
					
					// 3、获取所有的密码输入框
					$("input[type='password']").css("height", "200px");
					$(":password").css("border", "2px solid #ff0");
					
					// 4、获取所有的单选框
					console.log($("input[type='radio']").length);
					console.log($(":radio").length);
					
					// 5、获取所有复选框
					console.log($("input[type='checkbox']").length);
					console.log($(":checkbox").length);
					
					// 6、匹配所有被选中的单选框、复选框、option选项
					console.log($(":checked").length);
					
					console.log($("*").length);
					console.log($("*"));
				});
				
				

			});
		</script>
	</head>

	<body>
		基本选择器→：
		<!-- 按钮,id为b1 -->
		<input type="button" id="b1" value="b1,改变所有 div 元素的背景色为 #FD5551" />
		<!-- 按钮,id为b2 -->
		<input type="button" id="b2" value="b2,改变 id 为 one 的元素的背景色为 #7fa728" />
		<!-- 按钮,id为b3 -->
		<input type="button" id="b3" value="b3,改变 class 为 mini 的所有元素的背景色为 #EE82EE" />
		<hr />
		层级选择器→：
		<!-- 按钮,id为b4 -->
		<input type="button" id="b4" value="b4,改变 div 内所有 span 的背景色为 #DC21D2" />
		<!-- 按钮,id为b5 -->
		<input type="button" id="b5" value="b5,改变 id为two 元素的下一个相邻的 div元素 的背景色为 #29a29e" />
		<!-- 按钮,id为b6 -->
		<input type="button" id="b6" value="b6,改变 id为two 元素的后面所有的div兄弟元素 的背景色为 #ECD822" />
		<hr />
		基本过滤选择器→：
		<!-- 按钮,id为b7 -->
		<input type="button" id="b7" value="b7,改变第一个/最后一个 div 元素的背景色为 #5500ff" />
		<!-- 按钮,id为b8 -->
		<input type="button" id="b8" value="b8,改变第4个 div 元素的背景色为 #EA3AD8" />
		<hr />
		表单选择器→：
		<!-- 按钮,id为b9 -->
		<input type="button" id="b9" value="b9,测试表单选择器的使用" />

		<h3>点击按钮查看效果...</h3>

		<div id="one">
			这是一个div1,id是one
			<div>这是一个div11</div>
			<span class="mini">这是一个span,class为mini</span>
			<span class="mini">这是一个span,class为mini</span>
		</div>
		<div>这是一个div2
			<input type="button" value="按钮1" />
			<input type="button" value="按钮2" />
		</div>
		<div id="two">这是一个div3,id是two
			<span>这是一个span</span>
		</div>
		<div>这是一个div4</div>
		<div>这是一个div5</div>
		<span class="mini">这是一个span,class为mini</span>
		<div>这是一个div6</div>
		<span class="mini01">这是一个span,class为mini01</span>
		<span class="mini">这是一个span,class为mini</span>

		<hr />&nbsp;&nbsp;
		<input type="radio" value="male" />男
		<input type="radio" value="female" />女

		<input type="checkbox" value="basketball" />篮球
		<input type="checkbox" value="football" />足球

		<select>
			<option>北京</option>
			<option>上海</option>
			<option>广州</option>
		</select>
		<hr />
		<br />
		
		<!-- $("input[type='text']") -->
		<input type="text" name="user" />
		<input type="text" name="emai" /><hr />
		<br />

		<input type="password" name="psw" />
		<input type="password" name="repsw" />
		<hr />
	</body>
</html>
